<!doctype html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>标题</title>
<meta name='Keywords' content=''>
<meta name='Description' content=''>
<link rel='stylesheet' href='css/fyz.public.style.css' />
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
<style type='text/css'>
body{background:#EEEEEE;}
</style>
</head>
<body>
<style type="text/css">
div.singleClickChangeBut{width:300px; height:80px; margin:20px auto; position:relative;}
div.singleClickChangeBut a{display:block; width:45px; height:inherit; position:absolute; top:0px; z-index:20; cursor:pointer; background:#ccc; font-size:30px; text-align:center; line-height:80px; color:#fff;}
div.singleClickChangeBut a.singleClickChangeButLeft{left:0px;}
div.singleClickChangeBut a.singleClickChangeButRight{right:0px;}
/*singleClick star*/
div.singleClickChange{width:747px; height:260px; margin-top:30px; border:1px solid #C8C8C8; margin:0px auto;  position:relative; overflow:hidden;}
ul.singleClickChange{width:1000%; height:inherit; position:absolute; top:0px; left:0px;}
ul.singleClickChange li{width:170px; height:260px; font-size:40px; font-weight:bold; text-align:center; line-height:245px; margin-right:20px; border:1px solid #E4E4E4; color:#000; float:left; cursor:pointer;}
</style>
<!-- clickOneByOne one star -->
<div class="singleClickChangeBut">                                            
    <a href="javascript:;" class="singleClickChangeButLeft">&lt;</a>
    <a href="javascript:;" class="singleClickChangeButRight">&gt;</a>
</div>
<div class="singleClickChange">
	<ul class="singleClickChange">
		<li class='con' style="background:red; display:inline;"></li>
		<li class='con' style="background:orange;"></li>
		<li class='con' style="background:yellow;"></li>
		<li class='con' style="background:green;"></li>
		<li class='con' style="background:cyan;"></li>
		<li class='con' style="background:blue;"></li>
	</ul>
</div>
<!-- clickOneByOne one star -->
<script type="text/javascript">
(function($){
    $.fn.extend({
        'singleClickChange':function(options){
			var opts = $.extend({},singleClickChange_Defaluts,options);
			var $this = $(this);
			var $thisAll = $this.find('*');
			opts.liSize = $this.find('li.con').size();
			opts.liWidth = $this.find('li.con').outerWidth(true);
			$(opts.butRight).click(function(){
				partCom();
			});
			$(opts.butLeft).click(function(){
				opts.click --;
				if(opts.click == -1){opts.click = (opts.liSize - opts.showSum);};
				clickLeftChangePartCom();
			});
			if(opts.autoPlay){
				function autoPlay(){
					clearInterval(opts.timer);
					opts.timer = setInterval(function(){
						partCom();
					},opts.setIntervalTime);
				};				
				autoPlay();
				function clearIntervalFun(clearIntervalObj){
					$(clearIntervalObj).bind('mouseover',function(){clearInterval(opts.timer);});
					$(clearIntervalObj).bind('mouseout',function(){autoPlay();});
				};
				clearIntervalFun($this);
				clearIntervalFun($thisAll);
				clearIntervalFun(opts.butLeft);
				clearIntervalFun(opts.butRight);
			};
			function partCom(){
				opts.click++;
				if(opts.click == (opts.liSize-(opts.showSum-1))){opts.click = 0;};
				clickLeftChangePartCom();
			};
			function clickLeftChangePartCom(){
				opts.left = '-'+opts.click*opts.liWidth;
				$($this).stop(true,true).animate({'left':opts.left},opts.animateTime);
			};			
		}
    });
	var singleClickChange_Defaluts = {
		butLeft:'',
		butRight:'',
		timer:null,
		liSize:'',
		left:'',
		liWidth:'',
		click:0,
		showSum:4,
		animateTime:1000,
		setIntervalTime:2000,
		autoPlay:true
	};
}(window.jQuery));
$(function(){
    $("ul.singleClickChange").singleClickChange({
        autoPlay:true,
        showSum:4,
        animateTime:1000,
        setIntervalTime:2000,
		butLeft:'a.singleClickChangeButLeft',
        butRight:'a.singleClickChangeButRight'        
    });
});
</script>
</script>

</body>
</html>